<template>

	<div>

		<!-- 面包屑导航区域 -->

		<el-breadcrumb separator-class="el-icon-arrow-right">

			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>

			<el-breadcrumb-item>系统管理</el-breadcrumb-item>

			<el-breadcrumb-item>角色管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card>
			<!-- 表单 -->
			<el-form :inline="true" v-bind:model="formInline" class="demo-form-inline">
				<el-form-item label="角色名称">
					<el-input v-model="formInline.Name" placeholder="请输入名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit" round>搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="dialogAddFormVisible='true'" round>添加角色</el-button>
				</el-form-item>
			</el-form>
			<!-- 表格 -->
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="Id" label="编号">
				</el-table-column>
				<el-table-column prop="Name" label="角色名称">
				</el-table-column>
				<el-table-column label="操作" width="400px">
					<template slot-scope="scope">
						<el-button size="mini" @click="GetTree(scope.row)">模块</el-button>
						<el-button size="mini" type="success" @click="Edit(scope.row)">修改</el-button>
						<el-button size="mini" type="danger" @click="Delete(scope.row.Id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
			 :page-sizes="[10, 15, 20, 25]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper " :total="count">

			</el-pagination>
		</el-card>
		
		<!-- 模块 -->
		<el-dialog
		  title="提示"
		  :visible.sync="MoKuaidialogVisible"
		  width="30%" @close="setRightDialogClosed">
		  <el-tree 
		  ref="treeRef" 
		  :data="rightslist" 
		  :props="treeProps" 
		  node-key="Id" 
		  default-expand-all
		  :default-checked-keys="defKeys" 
		  show-checkbox 
		  @check="currentChecked">
		  </el-tree>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="MoKuaidialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
		  </span>
		</el-dialog>
		<!-- 添加 -->
		<el-dialog title="添加角色" :visible.sync="dialogAddFormVisible" @close="adddialogclosed">
			<el-form :model="addform" ref="addFormRef">
				<el-form-item label="名称" prop="Name" :label-width="formLabelWidth">
					<el-input v-model="addform.Name" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogAddFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addUser">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 修改 -->
		<el-dialog
		  title="修改角色"
		  :visible.sync="EditdialogVisible"
		  width="50%" @close="Editdialogclosed">
		  <el-form :model="Editform" ref="EditFormRef">
		  	<el-form-item label="名称" prop="Name" :label-width="formLabelWidth">
		  		<el-input v-model="Editform.Name" auto-complete="off"></el-input>
		  	</el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="EditdialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="EditDel()">确 定</el-button>
		  </span>
		</el-dialog>
	</div>

</template>



<script>
	export default {
		data() {
			return {
				formInline: {
					Name: ''
				},
				tableData: [],
				page: 1,
				limit: 10,
				count: 0,
				dialogAddFormVisible: false,
				EditdialogVisible:false,
				MoKuaidialogVisible:false,
				formLabelWidth: "120px",
				addform: {},
				Editform:{},
				rightslist:[],
				treeProps: {
				  children: 'children',
				  label: 'Name'
				},
				defKeys:[],
				roleId: '',
				count: [],
			}
		},
		created() {
			this.getTableList();
		},
		methods: {
			GetTree(role) {
			this.roleId = role.Id;
			console.log(role);
			let _this = this;
			this.MoKuaidialogVisible = true;
			this.$http.post('api/Role/GetRoleList', {
			RoleId: this.roleId
			}).then(function(res) {
			//console.log(res);
			_this.rightslist = res.data.data;
			_this.defKeys = res.data.data2;
			//console.log(_this.defKeys);
			})
			},
			currentChecked(nodeObj, SelectedObj) {
			console.log(SelectedObj)
			console.log(SelectedObj.checkedKeys) // 这是选中的节点的key数组
			console.log(SelectedObj.checkedNodes) // 这是选中的节点数组  
			this.count = SelectedObj.checkedKeys
			},
			//保存编辑模块
			saveRoleInfo() {
			let _this = this;
			let aKey = this.count;
			let keystr = "";
			for (var i = 0; i < aKey.length; i++) {
			keystr = keystr + aKey[i] + ","
			console.log(keystr);
			}
			keystr = keystr.substring(0, keystr.length - 1);
			console.log(keystr)
			this.$http.post('api/Role/editrolemoudule', {
			str: keystr,
			id: parseInt(this.roleId)
			}).then(function(res) {
			if (res.data.code == 0) {
			_this.$message.success(res.data.msg);
			_this.defKeys = "";
			_this.MoKuaidialogVisible = false;
			window.location.reload();
			} else {
			_this.$message.error(res.data.msg);
			}
			})
			},
			//监听分配权限对话框的关闭事件
			setRightDialogClosed() {
			this.defKeys = []
			},
			
			
			
			
			adddialogclosed(){
				this.$refs.addFormRef.resetFields()
			},
			Editdialogclosed(){
				this.$refs.Editform.resetFields()
			},
			async Delete(Id){
				const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err =>err)
				if(confirmResult!='confirm'){
					this.$message.info("已取消删除")
				}else{
					const {data:res}= await this.$http.post('api/Role/Delete',{Id})
					if(res.code==-1){
						this.$message.error("角色删除失败")
					}else if(res.code!==0){
						this.$message.error("该角色不能删除")
					}else{
						this.$message.success("角色删除成功")
						this.getTableList()
					}
				}
			},
			EditDel() {
				this.$refs.EditFormRef.validate(async valid => {
					if (!valid) return
					const {
						data: res
					} = await this.$http.post('api/Role/Edit', this.Editform)
					if (res.code == -1) {
						this.$message.error("修改失败！")
					}else if(res.code == -2){
						this.$message.error("用户名不能重复！")
					}else{
						this.$message.success("修改成功！");
						this.EditdialogVisible = false;
						this.getTableList();
					}
				})
			},
			Edit:function(row){
				this.Editform=row;
				this.EditdialogVisible=true;
			},
			onSubmit() {

				this.getTableList()

			},
			handleSizeChange(val) {
				this.limit = val;
				this.getTableList()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getTableList()
			},
			async getTableList() {
				const {
					data: res
				} = await this.$http.get('api/Role/user', {
					params: {
						page: this.page,
						limit: this.limit,
						Name: this.formInline.Name
					}
				})
				this.count = res.count;
				this.tableData = res.data;
			},
			//添加处理
			addUser() {
				this.$refs.addFormRef.validate(async valid => {
					if (!valid) return
					const {
						data: res
					} = await this.$http.post('api/Role/addUsers', this.addform)
					if (res.code == -1) {
						this.$message.error("添加失败！")
					}else if(res.code == -2){
						this.$message.error("用户名不能重复！")
					}else{
						this.$message.success("添加成功！");
						this.dialogAddFormVisible = false;
						this.getTableList();
					}
				})
			}
		}
	}
</script>
<style lang="less" scoped="scoped">



</style>
